//定义地图关卡
let level = 0;
//定义行动的步数
let steps = 0;
//定义用于存放步骤的数组；
let personSteps = [];
let boxSteps = [];
//创建地图数据，0表示地砖，1表示围墙，2表示小球，3表示箱子，4表示人物
//获取地图区域的div
let oWrap = document.getElementById('wrap');
//VIP初始信息
let isVip = false;
let isSUPVIP = false;
//创建地图
oCreatMap(level, isVip);
//上一关
let last = document.getElementById('prevLevel');
last.onclick = function () {
    level--;
    if (level < 0) {
        level = 0;
        alert('小可爱，不能再上一关了，已经是第一关了呢！！！')
    } else {
        oCreatMap(level);
    }
}
//下一关
let next = document.getElementById('nextLevel');
next.onclick = function () {
    level++;
    if (level > oMap.length - 1) {
        level = oMap.length - 1;
        alert('小可爱，不能再下一关了，已经是最后一关了呢！！！')
    } else {
        oCreatMap(level);
    }
}
//上一步
let lastSteps = document.getElementById('prev');
lastSteps.onclick = function () {
    oLastSteps(oP().oDIV, oP().oPerson, oP().oBOX)
}

//VIP
let vip = document.getElementById(`VIP`);
vip.onclick = function () {
    if (isVip == false) {
        let oQS = ['一字有五口，与门交朋友，顺贴人人爱，倒贴家家有。 （打一字）',
            '一日一里分上下，一根棍子腰中插。 （打一字）',
            '有竹不要充数，有草可以充饥，走来又得回去，开口一声叹息。 （打一字）',
            '国有家没有，哥有弟没有，唱有跳也有，说有读没有。 （打一字）',
            '说话的有，哑巴全无；诽谤的有，清白全无；讥讽的有，表扬全无。 （打一字）',
            '两个人一个耳，听起来真惊奇。 （打一字）',
            '一字生得妙，头上两只角，腰里六个口，底下八字脚。 （打一字）',
            '草帽头上戴，身上六只嘴，太阳已下山。 （打一字）',
            '一个小朋友，进门瞧一瞧；见人就张嘴，等待结果到。 （打一字）',
            '有足快快跑，有手轻轻抱，有水把茶泡，有饭能吃饱，有衣穿长袍，有火放鞭炮。 （打一字）'
        ];
        let oAS = ['福', '量', '于', '口', '言', '耸', '典', '曹', '问', '包'];
        let i = ~~(Math.random() * 10)
        let qs = prompt(oQS[i]);
        if (qs == oAS[i]) {
            alert(`恭喜你成功开启VIP模式，人物可以自由穿墙，赶快去试试吧！！！`);
            isVip = true;
            vip.value = 'VIP(启用中，点击停用。)'
            vip.style.backgroundColor = 'pink'
            // console.log(isVip);
        } else if (qs == '') {
            alert('您没有作答，VIP功能获取失败。')
        } else if (qs == null) {
            alert('您取消了作答，VIP功能获取失败。');
        } else {
            alert('很遗憾没有答对，请再接再厉哦！')
        }
    } else {
        let shotDown = confirm(`VIP功能启用中，请查看人物是否在围墙外，关闭此功能后人物将无法穿墙，确定关闭此功能？？？`);
        // shotDown? isVip=false:isVip=true;
        if (shotDown) {
            isVip = false;
            vip.style.backgroundColor = '';
            vip.value = 'VIP(停用中，点击启用。)'
        }
    }
}
//超级VIP
//定义自动通关的步骤数组
let oAuto = [
    [40, 38, 37, 37, 39, 38, 38, 40, 39, 39]

]
let supvip = document.getElementById('SUPVIP');
supvip.onclick = function () {
    let oKc = 0;
    oCreatMap(level);
    let oTime = setInterval(() => {
        if (oAuto[level] == undefined) {
            alert('此功能能够正常使用，但是自动通关步骤还没有定义哦。。。')
            clearInterval(oTime);
        } else {
            oP(oAuto[level][oKc]);
            oKc++;
            supvip.value = 'SUPVIP(启用中。)';
            supvip.style.backgroundColor = 'pink';
            if (oKc == oAuto[level].length) {
                clearInterval(oTime);
                supvip.style.backgroundColor = '';
                supvip.value = 'SUPVIP(停用中，点击启用。)'
            }
        }
    }, 500)
}
//关卡数字
// document.getElementById('level').value=`第${level+1}关`
//重试
let oRest = document.getElementById('restart');
oRest.onclick = () => {
    oCreatMap(level);
}
//控制按钮
let oCtr = document.getElementById('ctr');
let oCtrs = [...oCtr.getElementsByTagName('div')];
oCtrs.forEach((value, index) => {
    value.onclick = () => {
        console.log(index);
        oP(index + 37)
    }
})


//创建地图的函数
function oCreatMap(level) {
    if(level<=8){
        document.getElementById('level').value=`第0${level+1}关`
    }else{
        document.getElementById('level').value=`第${level+1}关`
    }
    //清空步数信息
    steps = 0;
    //清空上一步数组信息
    personSteps = [];
    boxSteps = [];
    //清空地图信息
    oWrap.innerHTML = '';
    oWrap.style.width = 35 * 16 + "px";
    oWrap.style.height = 35 * 16 + "px";
    //给地图加图片
    for (let i = 0; i < 16 * 16; i++) {
        let x = i % 16,
            y = parseInt(i / 16);
        switch (oMap[level][i]) {
            case 1:
                oDiv('wall', i, x, y)
                break;
            case 2:
                oDiv('ball', i, x, y)
                break
            case 3:
                oDiv('box', i, x, y)
                break
            case 4:
                oDiv('down', i, x, y);
                oP()
                break
        }
    }
}
//用于创建不同建筑物的函数
function oDiv(name, i, x, y) {
    let newDiv, newImg;
    newDiv = document.createElement('div');
    newImg = document.createElement('img');
    newDiv.style.cssText = "left:" + x * 35 + 'px;' + 'top:' + y * 35 + 'px;z-index:' + (x * y);
    newImg.src = 'img/' + name + '.png';
    newDiv.className = name;
    newDiv.x = x;
    newDiv.y = y;
    //appendChild要先创建节点，然后才能把创建的节点插入父元素下面
    newDiv.appendChild(newImg);
    oWrap.appendChild(newDiv);
}
//控制任务运动的函数
function oP(oKc) {

    let oDIV = document.getElementsByClassName('down');
    let oPerson = (oDIV[0].getElementsByTagName('img'))[0];
    let oBOX = document.getElementsByClassName('box');
    // let oBoxImg = (oBOX[0].getElementsByTagName('img'))[0];
    if (oKc == undefined) {
        document.onkeydown = function (ev) {
            oKc = ev.keyCode;
            oActive(oKc);
        }
    } else {

        oActive(oKc)
    }

    function oActive(oKc) {
        switch (oKc) {
            // 左方向
            case 37:
                oPerson.src = 'img/left.png';
                var newArry = [];
                //记录人物移动信息的数组
                personSteps.push([oDIV[0].x, oDIV[0].y, 'left'])
                oDIV[0].x = oDIV[0].x - 1;
                //判断人物的左边是否为围墙
                if (oMap[level][oDIV[0].y * 16 + oDIV[0].x] == 1) {
                    oDIV[0].x = oDIV[0].x + 1;
                    if (isVip) {
                        oDIV[0].x = oDIV[0].x - 1;
                    }
                } else {
                    one: for (let i = 0; i < oBOX.length; i++) {
                        //是否为箱子
                        if (oBOX[i].x == oDIV[0].x && oBOX[i].y == oDIV[0].y) {
                            //判断箱子的左边是箱子
                            for (let j = 0; j < oBOX.length; j++) {
                                if (oBOX[i].x - 1 == oBOX[j].x && oBOX[i].y == oBOX[j].y) {
                                    oDIV[0].x = oDIV[0].x + 1;
                                    break one;
                                }
                            }
                            //判断箱子的左边不是围墙
                            if (oMap[level][oBOX[i].y * 16 + oBOX[i].x - 1] !== 1) {
                                newArry = [i, oBOX[i].x, oBOX[i].y]
                                oBOX[i].x -= 1;
                                oBOX[i].style.cssText = "left:" + oBOX[i].x * 35 + 'px;' + 'top:' + oBOX[i].y * 35 + 'px;z-index:' + (oBOX[i].x * oBOX[i].y + 2);
                            } else {
                                oDIV[0].x = oDIV[0].x + 1;
                            }
                        };
                    }
                }
                oDIV[0].style.cssText = "left:" + oDIV[0].x * 35 + 'px;' + 'top:' + oDIV[0].y * 35 + 'px;z-index:' + (oDIV[0].x * oDIV[0].y + 1);
                pass(oBOX)
                //记录人物和箱子的移动信息
                if (personSteps[personSteps.length - 1].toString() !== [oDIV[0].x, oDIV[0].y, 'left'].toString()) {
                    boxSteps.push(newArry)
                } else {
                    personSteps.pop()
                }
                // console.log(personSteps,boxSteps);
                break;
                // 上方向
            case 38:
                oPerson.src = 'img/up.png';
                var newArry = [];
                personSteps.push([oDIV[0].x, oDIV[0].y, 'up'])
                // y -= 1;
                oDIV[0].y = oDIV[0].y - 1;
                //判断人物的左边是否为围墙
                if (oMap[level][oDIV[0].y * 16 + oDIV[0].x] == 1) {
                    oDIV[0].y = oDIV[0].y + 1;
                    if (isVip) {
                        oDIV[0].y = oDIV[0].y - 1;
                    }
                } else {

                    one: for (let i = 0; i < oBOX.length; i++) {
                        //是否为箱子
                        if (oBOX[i].x == oDIV[0].x && oBOX[i].y == oDIV[0].y) {
                            //判断箱子的左边是否为箱子
                            for (let j = 0; j < oBOX.length; j++) {
                                if (oBOX[i].x == oBOX[j].x && oBOX[i].y - 1 == oBOX[j].y) {
                                    oDIV[0].y = oDIV[0].y + 1;
                                    break one;
                                }
                            }
                            //判断箱子的左边是否为围墙
                            if (oMap[level][(oBOX[i].y - 1) * 16 + oBOX[i].x] !== 1) {
                                newArry = [i, oBOX[i].x, oBOX[i].y]
                                oBOX[i].y -= 1;
                                oBOX[i].style.cssText = "left:" + oBOX[i].x * 35 + 'px;' + 'top:' + oBOX[i].y * 35 + 'px;z-index:' + (oBOX[i].x * oBOX[i].y + 2);
                                // oDIV[0].style.cssText = "left:" + oDIV[0].x * 35 + 'px;' + 'top:' + oDIV[0].y * 35 + 'px;z-index:3';
                            } else {
                                oDIV[0].y = oDIV[0].y + 1;
                            }
                        };
                    }
                }
                // }
                oDIV[0].style.cssText = "left:" + oDIV[0].x * 35 + 'px;' + 'top:' + oDIV[0].y * 35 + 'px;z-index:' + (oDIV[0].x * oDIV[0].y + 1);
                pass(oBOX);
                //记录人物和箱子的移动信息
                if (personSteps[personSteps.length - 1].toString() !== [oDIV[0].x, oDIV[0].y, 'up'].toString()) {
                    boxSteps.push(newArry)
                } else {
                    personSteps.pop()
                }
                // console.log(personSteps,boxSteps);
                break;
                // 右方向
            case 39:
                oPerson.src = 'img/right.png';
                var newArry = [];
                //记录人物移动信息的数组
                personSteps.push([oDIV[0].x, oDIV[0].y, 'right'])
                // x += 1;
                oDIV[0].x = oDIV[0].x + 1;
                //判断人物的左边是否为围墙
                if (oMap[level][oDIV[0].y * 16 + oDIV[0].x] == 1) {
                    oDIV[0].x = oDIV[0].x - 1;
                    if (isVip) {
                        oDIV[0].x = oDIV[0].x + 1;
                    }
                } else {
                    one: for (let i = 0; i < oBOX.length; i++) {
                        //是否为箱子
                        if (oBOX[i].x == oDIV[0].x && oBOX[i].y == oDIV[0].y) {
                            //判断箱子的左边是箱子
                            for (let j = 0; j < oBOX.length; j++) {
                                if (oBOX[i].x + 1 == oBOX[j].x && oBOX[i].y == oBOX[j].y) {
                                    oDIV[0].x = oDIV[0].x - 1;
                                    break one;
                                }
                            }

                            //判断箱子的左边不是围墙
                            if (oMap[level][oBOX[i].y * 16 + oBOX[i].x + 1] !== 1) {
                                newArry = [i, oBOX[i].x, oBOX[i].y]
                                oBOX[i].x += 1;
                                oBOX[i].style.cssText = "left:" + oBOX[i].x * 35 + 'px;' + 'top:' + oBOX[i].y * 35 + 'px;z-index:' + (oBOX[i].x * oBOX[i].y + 2);
                                // oDIV[0].style.cssText = "left:" + oDIV[0].x * 35 + 'px;' + 'top:' + oDIV[0].y * 35 + 'px;z-index:3';
                            } else {
                                oDIV[0].x = oDIV[0].x - 1;
                            }
                        }
                    }

                }
                oDIV[0].style.cssText = "left:" + oDIV[0].x * 35 + 'px;' + 'top:' + oDIV[0].y * 35 + 'px;z-index:' + (oDIV[0].x * oDIV[0].y + 1);
                pass(oBOX);
                //记录人物和箱子的移动信息
                if (personSteps[personSteps.length - 1].toString() !== [oDIV[0].x, oDIV[0].y, 'right'].toString()) {
                    boxSteps.push(newArry)
                } else {
                    personSteps.pop()
                }
                // console.log(personSteps,boxSteps);
                break;
                // 下方向
            case 40:
                oPerson.src = 'img/down.png';
                var newArry = [];
                //记录人物移动信息的数组
                personSteps.push([oDIV[0].x, oDIV[0].y, 'down'])
                // y += 1;
                oDIV[0].y = oDIV[0].y + 1;
                //判断人物的左边是否为围墙
                if (oMap[level][oDIV[0].y * 16 + oDIV[0].x] == 1) {
                    oDIV[0].y = oDIV[0].y - 1;
                    if (isVip) {
                        oDIV[0].y = oDIV[0].y + 1;
                    }
                } else {

                    one: for (let i = 0; i < oBOX.length; i++) {
                        //是否为箱子
                        if (oBOX[i].x == oDIV[0].x && oBOX[i].y == oDIV[0].y) {
                            //判断箱子的左边是否为箱子
                            for (let j = 0; j < oBOX.length; j++) {
                                if (oBOX[i].x == oBOX[j].x && oBOX[i].y + 1 == oBOX[j].y) {
                                    oDIV[0].y = oDIV[0].y - 1;
                                    break one;
                                }
                            }
                            //判断箱子的左边是否为围墙
                            if (oMap[level][(oBOX[i].y + 1) * 16 + oBOX[i].x] !== 1) {
                                newArry = [i, oBOX[i].x, oBOX[i].y]
                                oBOX[i].y += 1;
                                oBOX[i].style.cssText = "left:" + oBOX[i].x * 35 + 'px;' + 'top:' + oBOX[i].y * 35 + 'px;z-index:' + (oBOX[i].x * oBOX[i].y + 2);
                            } else {
                                oDIV[0].y = oDIV[0].y - 1;
                            }
                        };
                    }
                }
                // }
                oDIV[0].style.cssText = "left:" + oDIV[0].x * 35 + 'px;' + 'top:' + oDIV[0].y * 35 + 'px;z-index:' + (oDIV[0].x * oDIV[0].y + 1);
                pass(oBOX);
                //记录人物和箱子的移动信息
                if (personSteps[personSteps.length - 1].toString() !== [oDIV[0].x, oDIV[0].y, 'down'].toString()) {
                    boxSteps.push(newArry)
                } else {
                    personSteps.pop()
                }
                // console.log(personSteps,boxSteps);
                break;
        }

    }

    return {
        oDIV,
        oPerson,
        oBOX
    };
}
//判定游戏结束的函数
function pass(oBOX) {
    let num = 0;
    steps++;
    let oBall = document.getElementsByClassName('ball');
    for (let i = 0; i < oBOX.length; i++) {
        for (let j = 0; j < oBall.length; j++) {
            if (oBOX[i].x == oBall[j].x && oBOX[i].y == oBall[j].y) {
                num++
            }
        }
    }
    if (num == oBall.length) {

        setTimeout(
            function () {
                alert(`恭喜屁猪通关！！！
								你一共走了${steps}步。
								请点击确定进入下一关。`)
                level++;
                oCreatMap(level);
            }, 100
        )

    }
    // console.log(num);
    // console.log(steps);

}
//上一步的函数
function oLastSteps(oDIV, oPerson, oBOX) {
    if (personSteps.length == 0) {
        alert('小可爱，已经是最开始的第一步了呢，不能再上一步了！！！');
        return;
    }
    oDIV[0].x = personSteps[personSteps.length - 1][0];
    oDIV[0].y = personSteps[personSteps.length - 1][1];
    if (boxSteps[boxSteps.length - 1].length !== 0) {
        let i = boxSteps[boxSteps.length - 1][0];
        oBOX[i].x = boxSteps[boxSteps.length - 1][1];
        oBOX[i].y = boxSteps[boxSteps.length - 1][2];
        oBOX[i].style.cssText = "left:" + oBOX[i].x * 35 + 'px;' + 'top:' + oBOX[i].y * 35 + 'px;z-index:' + (oBOX[i].x * oBOX[i].y + 2);
    }
    if (personSteps.length - 2 < 0) {
        oPerson.src = 'img/down.png';
    } else {
        oPerson.src = 'img/' + personSteps[personSteps.length - 2][2] + '.png';
    }
    oDIV[0].style.cssText = "left:" + oDIV[0].x * 35 + 'px;' + 'top:' + oDIV[0].y * 35 + 'px;z-index:' + (oDIV[0].x * oDIV[0].y + 1);
    personSteps.pop();
    boxSteps.pop();
}